@model WalkingTec.Mvvm.Doc.ViewModels.StudentVms.StudentVm

<style>
    .layui-table-cell {
        height: auto;
        white-space: normal;
        word-break: break-all;
        overflow: hidden;
    }
</style>

<wt:fieldset field-set-style="Simple" title="Transfer">
 </wt:fieldset>
   <p>Common attributes of transfer are:</p>
    <table lay-filter="parse-table-demo">
        <thead>
            <tr>
                <th lay-data="{field:'username', width:200}">Property</th>
                    <th lay-data="{field:'required', width:100}">Requird</th>
                <th lay-data="{field:'joinTime', width:600}">Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Id</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Control ID,generated according to the bound field name by default</td>
            </tr>
            <tr>
                <td>Field</td>
                <td><i class="layui-icon layui-icon-ok"></i></td>
                <td>Binding field,required</td>
            </tr>
            <tr>
                <td>Items</td>
                <td><i class="layui-icon layui-icon-ok"></i></td>
                <td>Left shuttle box data source</td>
            </tr>
            <tr>
                <td>RightTitle</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Title above the right shuttle box, default= 'selected'</td>
            </tr>
            <tr>
                <td>Disabled</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Disabled,or not</td>
            </tr>
            <tr>
                <td>Name</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Control name, generated by default according to the bound field name</td>
            </tr>
            <tr>
                <td>LabelText</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Label content</td>
            </tr>
            <tr>
                <td>LabelWidth</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Label length, default =80</td>
            </tr>
            <tr>
                <td>HideLabel</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Hide labe,l or not</td>
            </tr>
            <tr>
                <td>DefaultValue</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>The value selected by default, takes precedence over the value of the property bound by the field</td>
            </tr>
            <tr>
                <td>LeftTitle</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Title above the left shuttle box, default: 'to be selected'</td>
            </tr>
            <tr>
                <td>EnableSearch</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Enable local search, default=false</td>
            </tr>
            <tr>
                <td>NonePlaceholder</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Displayed text when no data, default: 'no data'</td>
            </tr>
            <tr>
                <td>SearchNonePlaceholder</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>Displayed text for no matching data, default: 'no matching data'</td>
            </tr>
            <tr>
                <td>ChangeFunc</td>
                <td><i class="layui-icon layui-icon-close"></i></td>
                <td>
                    When the data is shuttled left and right, callback returns the data currently shuttled.<br />
                    Parameters:<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Data: get the current shuttle data<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index: if the data comes from the left, index is 0, otherwise  index is 1<br />
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Transferins: current transfer instance
                </td>
            </tr>
        </tbody>
    </table>
    <wt:quote>
        <p>
            Transfer only supports setting the data source by setting the items property. Items need to be bound to a List. ComboSelectListItem is an auxiliary class provided by the framework. It has four properties: Text，Value，Selected and Disabled . Disabled is currently a new property specially added for the transfer component, which is used to disable the modification of certain items.
        <p>
            <ul class="doc">
                <li>When the items data source is set, the framework uses the text attribute in ComboSelectListItem as the title of transfer and the Value attribute as the value of transfer to generate data;</li>
                <li>The items data source can also be set as other types of lists. In this case, the framework will call ToString for each item in the  List as the text and value of the drop-down menu;</li>
                <li>when the property bound by the field has a value, the options in the items will be automatically placed in the 'checked' box;</li>
                <li>
                   DefaultValue takes precedence over Field. So when the DefaultValue is set, only the options in the DefaultValue will be automatically placed in the checked box, and the property value bound by the field will be ignored. DefaultValue is generally applicable to new pages, but sometimes not to modified pages.
                </li>
            </ul>
    </wt:quote>
    <wt:tab>
        <wt:tabheaders>
            <wt:tabheader title="Effect" />
            <wt:tabheader title="Code" />
        </wt:tabheaders>
        <wt:tabcontents>
            <wt:tabcontent>
                <wt:form vm="@Model" style="max-width:600px;">
                    <wt:transfer items="AllSchools" field="TransferSelectedSchools"
                                 left-title="Custom Title1" right-title="Custom Title2"
                                 none-placeholder="no data" disabled="false"
                                 enable-search="true" search-none-placeholder="no matching data"
                                 change-func="onChangeCallback" />
                    <wt:row align="AlignEnum.Right">
                        <wt:submitbutton disabled="true" />
                        <wt:closebutton disabled="true" />
                    </wt:row>
                </wt:form>
            </wt:tabcontent>
            <wt:tabcontent>
                <wt:code>
&ltwt:form vm="@@Model" width="600"&gt
  &ltwt:transfer items="AllSchools" field="TransferSelectedSchools"
    left-title="Custom Title1" right-title="Custom Title2"
    none-placeholder="no data" disabled="false"
    enable-search="true" search-none-placeholder="no matching data"
    change-func="onChangeCallback" /&gt
&ltwt:row align="AlignEnum.Right"&gt
  &ltwt:submitbutton disabled="true" /&gt
  &ltwt:closebutton disabled="true" /&gt
&lt/wt:row&gt
&lt/wt:form&gt
&ltscript&gt
  function onChangeCallback(data, index, transferIns) {
    ff.Alert((index == 0 ? 'left to right：' : 'right to left：') + '&ltbr/&gtTitle=' + data[0].title + '&ltbr/&gt Value=' + data[0].value);
  }
&lt/script&gt
                </wt:code>
            </wt:tabcontent>
        </wt:tabcontents>
    </wt:tab>

<script>
layui.use('code',function(){layui.code({ about: false })})
    layui.table.init('parse-table-demo', {
        limit: 100, page: false
    });
    function onChangeCallback(data, index, transferIns) {
        ff.Alert((index == 0 ? 'left to right：' : 'right to left：') + '<br/>Title=' + data[0].title + '<br/> Value=' + data[0].value);
    }
</script>
<script>
  $("#@Model.ViewDivId").parent().css("height", "auto");
</script>
